<template>
  <!-- 公文库 -->
  <div class="w-bg">
    <!-- 顶部分类 -->
    <div class="top-category">
      <!-- 待归档 已归档 -->
      <div class="category-title">
        <div
          v-for="(item, i) in categoryArr"
          :key="i"
          :class="['title-item', state.categoryActive === i ? 'title-active' : '']"
          @click="onChangeCategory(i)"
          >{{ item }}</div
        >
      </div>
      <!-- 发文归档 收文归档 -->
      <!-- <div v-show="state.categoryActive === 1" class="category-type">
        <span
          v-for="(item, i) in typeArr"
          :key="i"
          :class="['type-item', state.typeActive === i ? 'type-active' : '']"
          @click="onChangeType(i)"
        >
          <span>{{ item }}</span>
        </span>
      </div> -->
    </div>

    <!-- 分类内容区 -->
    <div class="type-content">
      <ToArchivedList v-if="categoryArr[state.categoryActive] === '待归档'" />

      <!-- <ArchivedList
        v-else-if="state.categoryActive === 1 && state.typeActive === 0"
        :type-val="state.typeActive"
      /> -->
      <ArchivedList
        v-else-if="categoryArr[state.categoryActive] === '已归档' && state.typeActive === 1"
        :type-val="state.typeActive"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import ToArchivedList from './components/toArchivedList/index.vue';
import ArchivedList from './components/archivedList/index.vue';
const categoryArr = ref([]);
const typeArr = ref(['发文归档', '收文归档']);
const state = reactive({
  categoryActive: 0,
  typeActive: 1,
  themecolor: sessionStorage.getItem('primaryColor')
});
function onChangeCategory(categoryVal) {
  if (state.categoryActive === categoryVal) {
    return;
  } else {
    state.categoryActive = categoryVal;
    // onChangeType(0);
  }
}
// function onChangeType(typeVal) {
//   if (state.typeActive === typeVal) {
//     return;
//   } else {
//     state.typeActive = typeVal;
//   }
// }
// console.log('categoryArr1:', categoryArr.value);
onMounted(() => {
  // console.log('categoryArr2:', categoryArr.value);
  let menus = localStorage.getItem('公文库');
  if (menus.indexOf('待归档') !== -1) {
    categoryArr.value.push('待归档');
  }
  if (menus.indexOf('已归档') !== -1) {
    categoryArr.value.push('已归档');
  }
  if (sessionStorage.getItem('startingActivesss')) {
    state.categoryActive = sessionStorage.getItem('startingActivesss') * 1;
  }
});
</script>
<style lang="less" scoped>
@import './index.less';
</style>
